<template>
  <div class="app">
    <h3>我是APP组件(祖),{{ name }}--{{ price }}</h3>
    <Child></Child>
  </div>
</template>


<script>
//TODO  隔代组件间的通信方式
import Child from "./components/Child.vue";
import {reactive, toRefs, provide} from "vue";

export default {
  name: 'App',
  components: {Child},
  setup() {
    let car = reactive({name: '奔驰', price: '40w'})
    provide('car', car)//给自己的后代组件传递数据---第一个参数给我提供的数据取个名字
    return {...toRefs(car)}


  }
}
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>
